export default {
    template: `
      <div>
          <h1>dashboard 页面</h1>
          <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo">
              <el-menu-item 
              v-if="v.children.length==0"
              :index="v.cat_id+''" :key="v.cat_id" v-for="(v,i) in menus">
              <i class="el-icon-location"></i>
                {{v.cat_name}}
              </el-menu-item>
              <el-submenu 
              v-if="item.children.length!=0"
              :index="item.cat_id+''" :key="item.cat_id" v-for="(item,index) in menus">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{item.cat_name}}</span>
                </template>
                  <el-menu-item :index="v.cat_id+''" :key="item.cat_id" v-for="(v,i) in item.children">
                      {{v.cat_name}}
                  </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :span="12">
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="ID"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Population"
            label="人口">
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
          </el-col>
        </el-row>
      </div>
      `,
    mounted() {
      // 获取菜单
      axios
        .get("/menu/getmenu")
        .then((res) => {
          // console.log(res.data);
          // 获取菜单的数据
          let menus = this.getMenuData(res.data.data);
          this.menus = menus;
        })
        .catch((err) => console.log(err));
      // 获取城市的分页的数据
      axios
        .get("/city", {
          params: {
            start: this.start,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          let data = res.data;
          this.total = data.total; // 4079
          this.tableData = data.data;
        })
        .catch((err) => console.log(err));
    },
    data: function () {
      return {
        start: 0,
        total: 0, // 总数
        pageSize: 20,
        tableData: [],
        menus: [],
      };
    },
    methods: {
      // 页码发生变化
      handleCurrentChange: function (val) {
        // val 当前的页面 pageSize 20
        // console.log(val);
        // 获取城市的分页的数据
        axios
          .get("/city", {
            params: {
              start: (val-1)*this.pageSize,
              pageSize: this.pageSize,
            },
          })
          .then((res) => {
            let data = res.data;
            this.total = data.total; // 4079
            this.tableData = data.data;
          })
          .catch((err) => console.log(err));
      },
      getMenuData(menus) {
        let first_menus = menus.filter((v) => {
          return v.cat_pid === 0; // 顶层菜单
        });
        //   console.log(first_menus);
        // 循环顶层菜单
        first_menus.map((v) => {
          // v=>children
          v.children = []; // 子级菜单
          menus.map((value) => {
            if (value.cat_pid === v.cat_id) {
              v.children.push(value);
            }
          });
        });
        //   console.log(first_menus);
        return first_menus;
      },
    },
  };
  